<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> php jquery ajax json 全国省市区三级联动下拉列表 简单实现  </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="generator" content="editplus" />
<meta name="author" content="Fanglor" />
<meta name="keywords" content="php,jquery,ajax,json,全国省市区,三级联动" />
<meta name="description" content="php,javascript,js,jquery,ajax,json,全国省市区三级联动" />
<load href="__PUBLIC__js/jquery.js">
<script type="text/javascript">
<!--
var ids = ['province','city','eare1']; //默认要操作的三个ID，注意先后顺序，不可颠倒。
// 参数说明:pid是关联 的id (第二个参数) 的父级,n表示是第几级,(如第一级，第二级，第三级),selected 默认被选中的选择的主键
function getList (pid,id,n,selected) {
var list = document.getElementById(id);
$.post ('ajax.php?act=getList',{'pid':pid},function  (data) {
var temp1 = eval('('+ data +')');    //把传过来的字符串转化成一个JSON对象。
var leng = temp1.length;

var  n = (n > ids.length ) ?  ids.length : n;
n = (n < 0 ) ?  0 : n;
for (var j = n ; j < ids.length ; j++)
{
var t = 'temp'+j
t = document.getElementById(ids[j]);
t.options.length = 1;
t.options[0]=new Option('请选择',-1);
}

if (leng > 0) {
list.length = leng + 1;
for (var i=0;i < temp1.length ;i++ )
{
list.options[i+1]=new Option(decodeURI(temp1[i].region_name),temp1[i].region_id);
if (temp1[i].region_id == selected ) {
list.options[i+1].selected = 'selected';
}
}
}

});
}
$(function () {
getList (1,'province',1,0);
//        getList (13,'city',2,190);
//        getList (190,'eare1',2,1601);
//三个都写是为了修改的时候，请三个框中默认的都有选中的值,一般增加的时候只写第一个就可以了。
});
//-->
</script>
</head>

<body>
<div >
<select name="pre" id="province" onchange="getList (this.value,'city',1)">
<option value="-1" selected="selected">请选择</option>
</select>

<select name="pre" id="city"  onchange="getList (this.value,'eare1',2)">
<option value="-1" selected="selected">请选择</option>
</select>

<select name="pre" id="eare1">
<option value="-1" selected="selected">请选择</option>
</select>

</div>
</body>
</html>
